<template>
  <div>
    <el-button type="primary" plain @click="openPicPanel" size="small">{{ buttonText }}</el-button>

    <!-- 相册面板 -->
    <Modal v-model="disPicPanel" width="1128" :footer-hide="true" :z-index="2019">
      <photo-album v-if="disPicPanel" :maxcount="maxcount" @selectPicData="getPicData"/>
    </Modal>
  </div>
</template>

<script>
import PhotoAlbum from '@/components/PhotoAlbum'

export default {
  name: 'SelectImg',
  components: {
    PhotoAlbum
  },
  props: {
    maxcount: {
      type: Number,
      default: 1
    },
    buttonText: {
      type: String,
      default: '选择图片'
    }
  },
  data() {
    return {
      disPicPanel: false,
      count: 1,
      max: 1,
      picList: []
    }
  },
  mounted() {
    this.count = this.maxcount;
    this.max = this.maxcount;
  },
  methods: {
    /**
     * 打开选择面板
     */
    openPicPanel() {
      if(this.maxcount > 0){
        this.disPicPanel = true;
      }else{
        this.$message.warning(`最多可选择${this.count}张图片，已选择${this.count-this.max}张,不可选择`);
      }
    },
    /**
     * 获取选择到的主图数据
     */
    getPicData(data) {
      this.disPicPanel = false;
      data.forEach(item => {
        if(this.max > 0) {
          this.picList.push(item.pic_url);
          this.max --;

          this.$emit('selectData',this.picList);
          this.max = this.maxcount;
          this.count = this.maxcount;
          this.picList = [];
        }else{
          this.$message.warning(`最多可选择${this.count}张图片，已选择${this.count-this.max}张`);
          return false
        }
      })
    },
  },
}
</script>